<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>数据项列表</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="shortcut icon" href="${ctx }/ico/favicon.ico">
<link href="${ctx }/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="${ctx }/css/font-awesome.css?v=4.4.0" rel="stylesheet">

<!-- jqgrid-->
<link href="${ctx }/css/plugins/jqgrid/ui.jqgrid.css?0820"
	rel="stylesheet">

<link href="${ctx }/css/animate.css" rel="stylesheet">
<link href="${ctx }/css/common.css" rel="stylesheet">
<link href="${ctx }/css/style.css?v=4.1.0" rel="stylesheet">
<!-- Sweet Alert -->
<link href="${ctx }/css/plugins/sweetalert/sweetalert.css"
	rel="stylesheet">
<link
	href="${ctx}/css/plugins/bootstrap-select/bootstrap-select.min.css"
	rel="stylesheet" />
<style type="text/css">
.btn-default{
	background:#fff;
	color:#333;
}
.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
    width: 150px;
}
</style>
<script src="${ctx }/js/twaver.js"></script>
<script src="${ctx }/js/demo.js"></script>
<script src="${ctx }/js/test.js"></script>
<!-- <script type="text/javascript">
      var linkEditorDemo = new LinkEditorDemo();
  </script> -->
</head>
<body class="gray-bg" onload="init()" style="height:98%;background:url(../images/indexbgnew.jpg);background-size:100% 100%;border:2px solid #ccc;">
		<div class="row m-b-sm m-t-sm">
			<div class="col-md-11" style="width: 100%">
				<div class="input-group" style="width:100%;">
					<div class="from-group">
						<label class="control-label" style="color:#fff">业务场景：</label>
						<select class="selectpicker" name="pk_scene_id" id="pk_scene_id" onchange="selectOnchang(this)">
							<c:forEach items="${list}" var="sceneInfo">
								<option value="${sceneInfo.pk_scene_id}"
									<c:if test="${monit_component_base.pk_scene_id eq sceneInfo.pk_scene_id }">selected</c:if>>${sceneInfo.scene_name}</option>
							</c:forEach>
						</select>
						<label class="control-label" style="color:#fff">采集类型：</label>
						<select class="selectpicker" id = "cjlx" name = "cjlx" >
						  <option value="0">增量告警</option>
						</select>
						
						<label class="control-label" style="color:#fff">时间：</label>
						<select class="selectpicker" id = "alarmTime" name = "alarmTime" onchange="selectOnchang(this)">
							<c:forEach items="${dateList}" var="alarmTime">
								<option value="${alarmTime}">${alarmTime}</option>
							</c:forEach>
						</select>
					</div>
				</div>
			</div>
		</div>
	<div id="leftbox" style="width: 50%; float: left;"></div>

	<script type="text/javascript">
        var network = new twaver.network.Network();
		network.setLinkFlowEnabled(true);
        network.setLinkFlowInterval(100);
        var box = network.getElementBox();
        var alarmBox = box.getAlarmBox();
			function createLink(box,from,to,withIcon,twoway,xoffset,flow){
			  var link=new twaver.Link(from,to);
			  if(flow==true){
			  	link.setStyle('link.flow',true);
			  }else{
			  	link.setStyle('link.flow',false);
			  }
			  if(true==twoway){
				   link.setStyle('link.width', 2);
				   link.setStyle('link.color', '#3691AC');
				   link.setStyle('arrow.from', true);/*有指向箭头，false无指向箭头*/
				   link.setStyle('arrow.from.color', '#3691AC');/*箭头的颜色*/
				   link.setStyle('arrow.from.outline', 'white');
				   link.setStyle('arrow.from.xoffset', -1);
				   link.setStyle('arrow.from.width', 12);/*箭头的宽、高*/
				   link.setStyle('arrow.from.height', 12);
				   link.setStyle('arrow.from.at.edge', true);
			  }  
			  link.setStyle('arrow.to', true);/*有指向箭头，false无指向箭头*/
			  link.setStyle('arrow.to.color', '#3691AC');/*箭头的颜色*/
			  link.setStyle('arrow.to.outline', 'white');
			  link.setStyle('arrow.to.xoffset', -1);
			  link.setStyle('arrow.to.width', 12);/*箭头的宽、高*/
			  link.setStyle('arrow.to.height', 12);
			  link.setStyle('arrow.to.at.edge', true);
			  link.setStyle('icons.position', 'center');
			  link.setStyle('link.xradius', 0);
			  link.setStyle('link.yradius', 0);
			  link.setStyle('label.font', '15px "Microsoft Yahei"');
			  link.setStyle('label.position', 'right.right');
			  if(withIcon){
			  	 link.setStyle('icons.names', ['link_arrow']);
			  }
			  link.setClient('xoffset', xoffset);
			  box.add(link);
			  
			  var nodeListener=function(e){
			   if(e.property==='location'){
			    updateLinkIcon(link);
			   }
			  };
			  from.addPropertyChangeListener(nodeListener);
			  to.addPropertyChangeListener(nodeListener);
			  updateLinkIcon(link);  
			   return link;
			 }
				 function updateLinkIcon(link){
				 	var from=link.getFromAgent();
				 	var to=link.getToAgent();
				 	var f=from.getCenterLocation();
				 	var t=to.getCenterLocation();
				 	var xoffset=(t.x-f.x)/2;
				 	if(link.getClient('xoffset')!=undefined){
				 		xoffset=t.x-f.x+link.getClient('xoffset')-(t.x-f.x)/2;
				 	}
				 	var yoffset=-(t.y-f.y)/2+40;
				 	link.setStyle('icons.xoffset', xoffset);
				 	link.setStyle('icons.yoffset', yoffset);		
				 	link.setStyle('label.xoffset', xoffset+5);
				 	link.setStyle('label.yoffset', (t.y-f.y)/2-to.getHeight()/2-20);
				 }
	
				function addAlarm(alarmID, elementID, alarmSeverity, alarmBox) { //告警
					var alarm = new twaver.Alarm(alarmID, elementID, alarmSeverity); 
					alarmBox.add(alarm); 
				} 
       	 function loadJSON(){
       		var v_alarmTime=$("#alarmTime option:selected").val();
       		var v_pk_scene_id=$("#pk_scene_id option:selected").val();
            $.ajax({
            type:"post",
            data: {
				"pk_scene_id": v_pk_scene_id
			},
            url:"${ctx}/link/loadLinkDetail",
            dataType:'json',
            success:function(data) {
            	console.log(data);
				twaver.SerializationSettings.setPropertyType('id', 'string');
				 new twaver.JsonSerializer(box).deserialize(data.data);
				 box.getDatas().forEach(element => {
					//console.log(element.getId());
					if(element.getName()=='test1'){
						addAlarm("alarm 4", element.getId(), twaver.AlarmSeverity.CRITICAL, box.getAlarmBox());
					}
				});  
            }
          });
            //链路图线路告警
            $.ajax({
                type:"post",
                data: {
    				"pk_scene_id": v_pk_scene_id,
    				"alarmTime": v_alarmTime,
    			   },
                url:"${ctx}/platform/alarmLink",
                dataType:'json', 
                success:function(data) {
                	//console.log(data);
                	 var linkjson=data;	
                	 if(linkjson!=null){
                		 for(var i=0;i<linkjson.length;i++){
    				        addAlarm("alarm 4"+i, linkjson[i].nodeId, twaver.AlarmSeverity.CRITICAL, box.getAlarmBox());
                		 }
                	 }
    				
                }
            });
           $.ajax({
               type:"post",
               data: {
   				"pk_scene_id": v_pk_scene_id
   			   },
               url:"${ctx}/platform/loadItemDetails",
               dataType:'json', 
               success:function(data) {
            	   console.log(data)
            	   try{
            		    var layerBox =  box.getLayerBox();
				    	var layer1 = new  twaver.Layer('unmovable', 'unmovable layer');
						layer1.setMovable(false);
						
						var layer2 = new twaver.Layer('uneditable', 'uneditable layer');
						layer2.setEditable(false);
						
						layerBox.add(layer1);
						layerBox.add(layer2); 
		           	
            	   for(var n=0;n<3;n++){
					   var deptGroup=new twaver.Group();	
					   deptGroup.setLayerId('layer1');
					   deptGroup.setStyle('select.color','none');
					   deptGroup.setMovable(false);
				       deptGroup.setImage('subgroup1');
				       if(n==0){
				       		  deptGroup.setSize(900,390);
				              deptGroup.setLocation(800,20);
				       }else if(n==1){
				       		  deptGroup.setSize(900,190);
				              deptGroup.setLocation(800,412);
				       }else{
				       		 deptGroup.setSize(900,260);
				             deptGroup.setLocation(800,618);
				       }
				       deptGroup.setStyle('select.color','none');
					   box.add(deptGroup);
				   }
            	   var deptjson=data;		
            	   for(var i=0;i<deptjson.length;i++){
            		   var deptnode=new twaver.Node({"id":deptjson[i].org_id,"name":deptjson[i].org_name});
            		   deptnode.setSize(300,50);
            		   deptnode.setLayerId('layer2');
            		   deptnode.setStyle('label.color','#fff');
				       if(i==2){
				    	   deptnode.setLocation(1080,27);
				       }else if(i==1){
				    	   deptnode.setLocation(1080,415);
				       }else if(i==0){
				       	   deptnode.setLocation(1080,622);
				       }
				       deptnode.setMovable(false);
				       deptnode.setStyle('label.position','center');
				       deptnode.setStyle('label.font','18px "Microsoft Yahei"');
				       deptnode.setStyle('label.padding.top',60);
				       deptnode.setImage('title');
				       box.add(deptnode);
				       
				       var kpijson=deptjson[i].children;
				       //console.log(kpijson.length);
				       var  t=0;
				       for(var m=0;m<kpijson.length;m++){
				    	    var subnode=new twaver.Node({"id":kpijson[m].reserved1,"name":kpijson[m].item_name});
				    	    subnode.setStyle('outer.width',0);
				    	    subnode.setLayerId('layer2');
				    	    if(i==2){
								if(m%4==0){
								    	t++;
								    	subnode.setLocation(1000,100+40*(t-1));
								}else{
									if(t==1){
										subnode.setLocation(1000+180*m,100+40*(t-1));
									}else if(t==2){
										subnode.setLocation(1000+180*(m-4),100+40*(t-1));
									}else if(t==3){
										subnode.setLocation(1000+180*(m-8),100+40*(t-1));
									}else{
										subnode.setLocation(1000+180*(m-12),100+40*(t-1));
									}
								}
							}else if(i==1){
								if(m%4==0){
							    	t++;
							    	subnode.setLocation(1000,490+40*(t-1));
								}else{
									if(t==1){
										subnode.setLocation(1000+180*m,490+40*(t-1));
									}else if(t==2){
										subnode.setLocation(1000+180*(m-4),490+40*(t-1));
									}else if(t==3){
										subnode.setLocation(1000+180*(m-8),490+40*(t-1));
									}else{
										subnode.setLocation(1000+180*(m-12),490+40*(t-1));
									}
								}
							}else if(i==0){
								if(m%4==0){
							    	t++;
							    	subnode.setLocation(1000,700+40*(t-1));
								}else{
									if(t==1){
										subnode.setLocation(1000+180*m,700+40*(t-1));
									}else if(t==2){
										subnode.setLocation(1000+180*(m-4),700+40*(t-1));
									}else if(t==3){
										subnode.setLocation(1000+180*(m-8),700+40*(t-1));
									}else{
										subnode.setLocation(1000+180*(m-12),700+40*(t-1));
									}
								}
							}
				    	    subnode.setMovable(false);
				    	    subnode.setClient('kpi',true);
				    	    subnode.setImage('normal0');
				    	    subnode.setStyle('label.color','#fff');
							subnode.setClient('subnetwork',true);
							subnode.setStyle('label.font','14px "Microsoft Yahei"');
							subnode.setStyle('label.position','left.left');
							box.add(subnode); 
				       }
            	   }
           	    }catch(e){
					console.log(e.message);
				}
               }
           }); 
           
           $.ajax({
               type:"post",
               data: {
   				"pk_scene_id": v_pk_scene_id,
   				"alarmTime": v_alarmTime,
   			},
               url:"${ctx}/platform/alarmList",
               dataType:'json',
               success:function(data) {
   				   for(var i=0;i<data.length;i++){
   						var alarm=data[i].reserved1;	
   						addAlarm("alarm"+i, alarm, twaver.AlarmSeverity.CRITICAL, box.getAlarmBox());
   						//alarm.setClient("show.tip", false);
   					}   
               }
             });
           
           
            network.getAlarmLabel = function (element) {
        	   var severity = element.getAlarmState().getHighestNewAlarmSeverity();
        	   return null ;
        	}
        }
       	function addAlarm(alarmID, elementID, alarmSeverity, alarmBox) {
       		var alarm = new twaver.Alarm(alarmID, elementID, alarmSeverity);
       		alarmBox.add(alarm);
       	}
        function  init() {
        	registImages();
        	registerImagenew();
            var networkDom = network.getView();
            networkDom.style.width = "100%";
            networkDom.style.height = "100%";
            document.body.appendChild(networkDom);
            loadJSON();
            
            var v_pk_scene_id=$("#pk_scene_id option:selected").val();
            var v_alarmTime=$("#alarmTime option:selected").val();
            network.addInteractionListener(function(e) {
    			if(e.kind == "doubleClickElement") {
    				if(e.element.getClient('kpi')==true) {
    					var  nodeid=e.element.getId();
    					location.href="${ctx}/platform/alarmDetail?pk_scene_id="+v_pk_scene_id+"&reserved1="+nodeid+"&alarmTime="+v_alarmTime;
    				}
    			}
    		});
            var taps=window.parent.finSideMenu();
			 var aw = taps.width();//width()返回元素的宽高，不包括padding/border/margin
			 var hh=taps.height();
    		
           /*  $(document).keyup(function(event){
        		if(event.keyCode==27||event.keyCode==96){
        			setTimeout(function(){			 
        				network.adjustBounds({x: 0, y: 0, width: aw , height:hh});
        				network.zoomOverview();	
        			},200); 
        		}
        	}); */
        	setTimeout(function(){			 
        		network.adjustBounds({x: 0, y: 0, width:aw , height:hh});
        		network.zoomOverview();	
        	},400);   
        }
	    function registImages(){
	        this.registerImage("../images/os/linux.png");
	        this.registerImage("../images/os/centos.png");
	        this.registerImage("../images/os/debian.png");
	        this.registerImage("../images/os/solaris.png");
	        this.registerImage("../images/link/HAProxy.png");
	        this.registerImage("../images/link/INTARWEB.png");
	        this.registerImage("../images/link/SOWEB.png");
	        this.registerImage("../images/link/VLAN.png");
	        this.registerImage("../images/link/shapeEdit.png");
		
	    }
	    function registerNormalImage(url, name){
			var image = new Image();
			image.src = url;
			image.onload = function() {
				twaver.Util.registerImage(name, image, image.width, image.height);
				image.onload = null;
				network.invalidateElementUIs();
			};
		}
	    function registerImagenew(){
	    	this.registerNormalImage('../images/zbtablebg.png','title');
	    	this.registerNormalImage('../images/subgroup1z1.png','subgroup1');
	    	this.registerNormalImage('../images/alarmg.png','normal0');
	    }
    function registerImage(url) {
        demo.Util.registerImage(url, this.network);
    }
    function selectOnchang(obj){ 
    	this.box.clear();
    	loadJSON();
    }
    </script>
	<!-- 全局js -->
	<script src="${ctx }/js/jquery.min.js?v=2.1.4"></script>
	<script src="${ctx }/js/bootstrap.min.js?v=3.3.6"></script>
	<!-- Peity -->
	<script src="${ctx }/js/plugins/peity/jquery.peity.min.js"></script>
	<!-- jqGrid -->
	<script src="${ctx }/js/plugins/jqgrid/i18n/grid.locale-cn.js?0820"></script>
	<script src="${ctx }/js/plugins/jqgrid/jquery.jqGrid.min.js?0820"></script>

	<!-- jQuery Validation plugin javascript-->
	<script src="${ctx }/js/plugins/validate/jquery.validate.min.js"></script>
	<script src="${ctx }/js/plugins/validate/messages_zh.min.js"></script>
	<!-- layer javascript -->
	<script src="${ctx }/js/plugins/layer/layer.min.js"></script>
	<!-- jQuery form-->
	<script src="${ctx }/js/jquery.form.js"></script>
	<script src="${ctx }/js/content.js?v=1.0.0"></script>
	<script
		src="${ctx}/js/plugins/bootstrap-select/bootstrap-select.min.js"></script>
</body>
</html>